<template>
  <div>
    <div v-if="!sub">
      <el-form class="tableSearch" size="mini">
        <el-form-item>
          <el-button type="primary" v-if='setRole("新增")' @click="routerPush('1')">新增</el-button>
        </el-form-item>
      </el-form>

      <!-- 搜索框 -->
      <div class="tableSearch">
        <el-form size="mini">
          <el-form-item label="" label-width="0">
            <el-input v-model="selectdata.keyword" placeholder="请输入供应商名称、编码" style="width:200px;"></el-input>
          </el-form-item>
          <el-form-item label="入驻状态：" label-width="100px">
            <el-select v-model="selectdata.isLogin" placeholder="请选择">
              <el-option label="全部" value=""></el-option>
              <el-option v-for="(item, index) in isLoginArr" :key="index" :label="item" :value="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="" label-width="15px">
            <el-button type="primary" @click="orderTable.handleSearch(_selectBaseShopPageList, orderTable.pageData)">搜索</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 表格 -->
      <div class="tableMain">
        <el-table :data="orderTable.tableData">
          <el-table-column prop="shopCode" label="供应商编码" align="center" width="200"></el-table-column>
          <el-table-column prop="name" label="供应商名称" align="center"></el-table-column>
          <el-table-column prop="status" align="center" label="是否启用">
            <template slot-scope="scope">
              <span v-if="scope.row.status == '0'">启用</span>
              <span v-if="scope.row.status == '1'">停用</span>
            </template>
          </el-table-column>
          <el-table-column prop="principal" align="center" label="联系人"></el-table-column>
          <el-table-column prop="linkPhone" align="center" label="联系电话"></el-table-column>
          <el-table-column prop="isLogin" label="入驻状态" align="center">
            <template slot-scope="scope">
              <span>{{isLoginArr[scope.row.isLogin]}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" width="180">
            <template slot-scope="scope">
              <el-button size="mini" @click="routerPush(0,scope.row.id)" type="text">查看</el-button>
              <el-button size="mini" v-if="setRole('采购价格协议') && scope.row.status == '0'" @click="routerPushPrice(scope.row.id, scope.row.name, scope.row.isLogin)" type="text">价格协议</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 页码 -->
        <page-unit :pageData="orderTable.pageData" :func="_selectBaseShopPageList"></page-unit>
      </div>
    </div>

    <div v-else>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import pageUnit from "components/Page";
import u from "@/util";
import { TableHandle } from "@/util/class";
import { selectBaseShopPageList } from "@/api";

export default {
  components: { pageUnit },
  computed: mapState(["sub", "power", "merchantId"]),
  data () {
    return {
      selectdata: {
        keyword: '',
        isLogin: ''
      },
      isLoginArr: ['未入驻', '已入驻'],  // 入驻状态
      orderTable: new TableHandle(),
    };
  },
  mounted () {
    this._selectBaseShopPageList(this.orderTable.pageData.pageSize, 1);
  },
  watch: {
    sub: {
      handler: function (val, oldVal) {
        if (oldVal != null && val == false) {
          this.orderTable.pageData.currentPage = 1
          this._selectBaseShopPageList(this.orderTable.pageData.pageSize, 1)
        }
      },
      deep: true
    }
  },
  methods: {
    //配置权限
    setRole (key) {
      return u.selectTitle(this.power, key);
    },

    // 获取表格数据
    _selectBaseShopPageList (pageSize, pageNum) {
      selectBaseShopPageList({
        businessId: this.merchantId,
        pageNum: pageNum,
        pageSize: pageSize,
        nameOrCode: this.selectdata.keyword,
        openAccount: this.selectdata.openAccount,
        isLogin: this.selectdata.isLogin,
        type: 2
      }).then(res => {
        this.orderTable.tableData = res.data.list
        this.orderTable.pageData.totalItems = res.data.pageTotal
      });
    },

    // 新增/查看
    routerPush (status, id = "") {
      u.routerTo("/operate-management/supplier-management/supplier-supplierMg/supplier-supplierDetail", { status: status, id: id });
    },

    // 采购价格协议
    routerPushPrice (supplierId, supplierName, isLogin) {
      u.routerTo("/operate-management/supplier-management/supplier-supplierMg/supplier-Purchase", {
        supplierId: supplierId,  // 供应商id
        supplierName: supplierName,   // 供应商名称
        isLogin: isLogin   // 是否入驻
      });
    }
  }
};
</script>
